<template>
  <section class="detail-box">
    <el-row class="detail-info">
      <div class="info-title">签约信息</div>
      <el-col :span="24" class="info-list">
        <div class="info-item">
          <span class="left">开户人：</span>
          <span>{{signInfo.bankOpenUser}}</span>
        </div>
        <div class="info-item">
          <span class="left">开户行：</span>
          <span>{{signInfo.bank}}</span>
        </div>
        <div class="info-item">
          <span class="left">银行卡号：</span>
          <span>{{signInfo.corporateAccount}}</span>
        </div>
        <div class="info-item">
          <span class="left">税率：</span>
          <span>{{signInfo.rate * 100}}%</span>
        </div>
      </el-col>
    </el-row>
  </section>
</template>
<script>
export default {
  data () {
    return {
      signInfo: {}
    }
  },
  created () {
    if (this.$store.getters.getSystemInfo) { // 在不刷新本页情况下防止多次请求
      this.signInfo = this.$store.getters.getSystemInfo.settings
    } else {
      this.$store.dispatch('setSystemInfo').then(data => {
        this.signInfo = data.settings
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .detail-box {
    padding: 20px 10px 0;
    .detail-top-nav {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
    .detail-info {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 12px 10px 0;
      margin-bottom: 20px;
      .info-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
        padding-left: 10px;
      }
      .info-list {
        padding: 20px 0;
      }
      .info-item {
        padding-left: 10px;
        padding-bottom: 10px;
        color: #4f4f4f;
      }
      .info-sub {
        padding-left: 10px;
        color: #d1d1d1;
        font-size: 14px;
        span {
          display: inline-flex;
          width: 14px;
          height: 14px;
          border: 1px solid #ccc;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }
      .info-item:last-child {
        padding-bottom: 0;
      }
      .left {
        display: inline-block;
        width: 120px;
        text-align: left;
        color: gray;
      }
    }
  }
</style>
